Vue.js2.0基础学习笔记

1、使用脚手架Vue-cli构建vue项目

初始化项目：vue create project  或 vue ui
进入项目根目录：cd project
在服务器中打开：npm run serve  或  yarn serve
打包项目：npm run build   或  yarn build
测试项目：npm run lint   或  yarn lint
安装插件或依赖：vue add element 或 yarn add element-ui 或 npm install element-ui --save

2、申明式渲染

<div id="app">
    {{msg}}
</div>

var app=new Vue({
    el:'#app',
    data:{
        msg:'Hello World!'
    }
})

result： hello world

3、Vue实例

var data={a:1}
var vm=new Vue({
    el:'example',
    data:data
})

vm.$data===data    //=>true
vm.$el===document.getElementById('example')    //=>true
vm.$watch('a',function(newValue,oldValue){
    //=>当 “ $vm.a ”改变后调用
})

4、Vue的生命周期构子

• new Vue()实例化一个vue对象
• 初始化事件和生命周期
• beforeCreate构子：组件创建之前，数据data和事件监测已初始化
• 通过依赖注入导入依赖项
• created构子：组件实例以创建完成，此时Dom还未生成
• 检查是否配置挂载节点 el 项，如果没有则等待使用vm.$mount(el)绑定
• 是否存在：template 选项，存在则将其编译到渲染函数，不存在则以el的outHTML为编译模板
• beforeMount构子：模板编译、挂载之前调用
• 编译，并替换了被绑定元素
• mounted构子：组件编译、挂载节点
• beforeupdate构子：当data数据发生改变时触发，此时即将更新渲染
• updated构子：重新渲染成功
• beforeDestroy:组件即将销毁
• destroyed：组件已经销毁

5、Vue常用语法、指令

 数据绑定语法：<span>{{msg}}</span>
 一次性数据绑定：<span v-once>{{msg}}</span>    //但数据改变时msg不更新
 数据绑定只能解释普通文本，解释html可用v-html：<span v-html="tem"></span>
 
 v-if指令：用于条件判断移除显示元素，v-if是真正的条件渲染，v-show是切换display
     <span v-if="ok">yes</span>
     <span v-else>No</span>
     <template v-if="true">
         <h1>可以使用template包裹住元素来判断，不会显示多余的template标签</h1>
     </template>
 
 v-bind指令：用于绑定HTML特性如  Class、src、href、style
 
      <a :href="url"></a> 
      <div class="a" :class="{active:isActive,'text-danger':hasErr}"></div>
      data:{
          isActive:true,
          hasErr:false
      }
      result:    <div class="a active"></div>
      

 v-on指令：用于监听Dom事件   <a @click=""></a>
 
 v-for指令用于循环：
 
     <div id="app">
         <ul>
             <li v-for="item in items">{{item.text}}</li>
         </ul>
     </div>
     var app=new Vue({
         el:'#app',
         data:{
             items:[
                 {text:'Javascript'},
                 {text:'Vue'}
             ]
         }
     })

6、计算属性与侦听器

 计算属性用于简单计算，由于在数据绑定中写表达式难以维护，也无法进行条件判断等动作,可以使用计算属性来实现，计算属性会根据其依赖的值自动更新并缓存
     <span>{{reversedMsg}}</span>
     new Vue({
         el:'app',
         data:{
             Msg:'Hello'
         },
         computed:{
             reversedMsg:function(){
                 return this.Msg.split('').reverse.join('')
             }
         },
         watch:{
             Msg:function(newMsg,oldMsg){
                 newMsg=oldMsg+1
             }
         }
     })
     
     result: gsMdesrevrr
     
侦听器watch侦听数据变化（Msg）：当需要在数据变化时执行异步或开销较大的操作时使用

7、列表渲染(v-for的优先级比v-if高)

<ul>
    <template v-for="(item,index) in items" :key="item.index" v-if(item.age>20)>
       <li> {{aaa}}-{{index}}-{{item.messge}}</li>
       <li class="more">底部加载数据</li>
    </template>
</ul>
data:{
    aaa:333,
    items:[
        {messge:111,age:444},
        {messge:222}
    ]
}
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

8、使用Vue.set()响应式控制数据

var vm =new Vue({
    data:{
        user:{
            name:'Cai'
        }
    }
})

添加一个新的 age 属性到嵌套的 userProfile 对象
vm.set(vm.user,'age',22)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign()
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

9、事件处理

<button @click="wran('传入消息',$event)"></button>
methods：{
    warn:function(message,event){
        if(event){
            // 现在我们可以访问原生事件对象
        }
    }
}

<a @click.stop='doThis'></a>    //阻止单击事件继续传播

<form @submit.prevent=''></form>    //提交事件不再重载页面

<div @click.capture=''></div>    // 添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div @click.self="">...</div>    //只当在 event.target 是当前元素自身时触发处理函数
<div @click.once=""></div>    //只触发一次点击

<div v-on:scroll.passive="onScroll">...</div>    //滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，可提升性能

键盘事件：
<input @keyup.enter="submit" />    //按 enter键触发
<input @keyup.page-down="onPageDown">    //处理函数仅在 $event.key === 'PageDown' 时被调用

10、Vue表单处理

v-model双向数据绑定

    <input v-model="message">    //输入框
    <p style="white-space: pre-line;">{{message}}</p>
    <textarea v-model="message"></textarea>    //多行输入框
    
    ==>复选框
    <div id="example">
        <input type="checkbox" id="red" value="red" v-model="selectColor" >
        <label for="red">红色</babel>
        <input type="checkbox" id="green" value="green" v-model="selectColor" >
        <label for="green">绿色</babel>
        <input type="checkbox" id="blue" value="blue" v-model="selectColor" >
        <label for="blue">蓝色</babel>
        <span>{{selectColor}}</span>
    </div>
    new Vue({
        el:'example',
        data:{
            selectColor:[]    //选中项会添加至数组selectColor中
        }
    })
    
    ==>单选按钮
    <input type="radio" v-model="select" value="男">
    <input type="radio" v-model="select" value="女">
    <span>{{select}}</span>
    data:{
        select:''
    }
    
    ==>下拉选择框
    <select v-model="such">    //加 multiple 多选，得到数组
        <template v-for="option in options">
            <option disabled>请选择</option>
            <option :value='option.value'>{{option.text}}</option>
        </template>
    </select>
    <span>{{such}}</span>
    data:{
        such:'A',
        options:[
            {text:'one',value:'A'},
            {text:'two',value:'B'}
        ]
    }
    <input type="checkbox" v-model="toggle">    //当选中时vm.toggle===true
    <input type="radio" v-model="pick" :value="a">    //选中时vm.pick===vm.a
    <input v-model.lazy="msg" >   //在change时更新而非input
    <input v-model.number="age" type="number">    //将用户的输入值转为数值类型
    <input v-model.trim="msg">    //自动过滤用户输入的首尾空白字
 

11、Vue组件基础

• 定义一个组件 （组件与 new Vue 接收相同的选项，除el外）

  Vue.component('my-component',{
     data:function(){        //一个组件的 data 选项必须是一个函数
         return{
             count:0
         }
     },
     template:'<button @click='count++'>{{count}}</button>'
  })
  使用组件：<my-component></my-component>
  

• 父组件通过Prop向子组件传递数据

  Vue.component('child',{
     props:['title'],
     template:'<h3>{{title}}</h3>'
  })
  在父组件中使用：<child title='我是标题'></child>
  
  

• 给子组件传递的数据来自父组件的data

  Vue.component('child',{
     props:['title'],
     template:'<h3>{{title}}</h3>'
  })
  
  new Vue({
      el:'#app',
      data:{
          posts:[
              {id:1,title:'title1'},
              {id:2,title:'title2'}
          ]
      }
  })
  <child v-for='post in posts' :key='post.id' :title='post.title'></child>    //循环动态渲染两个child组件
  
  

• 当需要传递的props太多时，可以在父组件传递一个数组或对象,然后在子组件接收
  Vue.component('child',{

     props:['post'],
     template:`
         <div>
             <h2>{{post.title}}</h2>
             <div>{{post.content}}</div>
         </div>
     `
     })
     <child v-for='post in posts' :key='post.id' :post='post'></child>
  

• 子组件通过事件向父组件发送消息

     Vue.component('child',{
         template:`<button @click='$emit('setFont',0.1)'></button>`
     })
     
     new Vue({
         el:'#app',
         data:{
             postFontSize:1
         },
         template:`
             <div style='{fontSize:postFontSize+'em'}'>
                 <p>点击按钮放大文字</p>
                 <child @setFont='postFontSize+=$event'></child>
             </div>
         `
     })
  
  

• 如果自定义组件需要使用 v-model 实现双向数据绑定

     Vue.component('my-input',{
         props:['value'],
         template:`
             <input :value='value' :input='$emit('input',$event.target.value)'>
         `
     })
     <my-input v-model='searchText'></my-input>
  
  

• <slot>插槽

     <alert-box>
           //如果想在这里面写东西,在组件内用插槽
     </alert-box>
     Vue.component('alert-box',{
         template:`
             <div class='demo'>
                 <slot></slot>
             </div>
         `
     })
  

• 动态组件与 is 特性

     <ul>、<ol>、<table> 和 <select>等元素对内部元素有严格的要求如：li/tr/option,如果想在这些元素中嵌入使用自定义组件，可以使用 is 特性：
     <ul>
         <li is='my-component'></li>
     </ul>
     
     使用 is 实现动态组件
     <component :is='creunt'></component>